import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import QueryPanel from './QueryPanel';
import TablePanel from './TablePanel';
import DetailPage from './DetailPage';
import UpdatePanel from './UpdatePanel';
import PageImportCheckAttributes from './PageImportCheckAttributes';
import PageImportSalesAttributes from './PageImportSalesAttributes';
import PageImportProduceAttributes from './PageImportProduceAttributes';
import {Card} from 'antd';
import routes from './routes';
import {Route, Switch} from 'react-router-dom';
import Breadcrumb from 'Shell/components/Breadcrumb';
import {createNotification} from 'Shared/utils/serverNotification';
import 'ant-design-pro/dist/ant-design-pro.css';
import NoMatchRoute from '../common/NoMatchRoute';

export class App extends PureComponent {
    componentDidMount() {
        this.props.queryInitData();
    }
    componentDidUpdate(prevProps) {
        createNotification(this.props.notification, prevProps.notification);
    }

    render() {
        return (
            <div>
                <Route render={props => <Breadcrumb location={props.location} />} />
                <div className="page-main">
                    <Switch>
                        <Route path={routes.query.url()} exact render={props =>
                            <div>
                                <Card><QueryPanel history={props.history}/></Card>
                                <Card><TablePanel history={props.history}/></Card>
                            </div>} />
                        <Route path={routes.detail.url()} exact render={props =>
                            <DetailPage id={props.match.params.id} history={props.history}/>} />
                        <Route path={routes.importCheckAttributes.url()} exact render={props =>
                            <PageImportCheckAttributes id={props.match.params.id} history={props.history}/>} />
                        <Route path={routes.importSalesAttributes.url()} exact render={props =>
                            <PageImportSalesAttributes id={props.match.params.id} history={props.history}/>} />
                        <Route path={routes.importProduceAttributes.url()} exact render={props =>
                            <PageImportProduceAttributes id={props.match.params.id} history={props.history}/>} />
                        <Route path={routes.update.url()} exact render={props =>
                            <UpdatePanel id={props.match.params.id} history={props.history} />} />
                        <NoMatchRoute link={routes.query.url()} />
                    </Switch>
                </div>
            </div>
        );
    }
}

App.propTypes = {
    notification: PropTypes.object,
    queryInitData: PropTypes.func
};

import {connect} from 'react-redux';
import {createSelector} from 'reselect';
import {getInitData} from './actions';

const getNotification = createSelector(state => state.getIn(['page', 'notification']), data => data.toJS());
const mapStateToProps = state => ({
    notification: getNotification(state)
});

const mapDispatchToProps = dispatch => ({
    queryInitData: () => dispatch(getInitData())
});

export default connect(mapStateToProps, mapDispatchToProps)(App);
